<template>
  <el-dialog
    v-model="dialogVisible"
    title="部门发牌情况"
    width="1000px"
    :before-close="close"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-scrollbar max-height="calc(100vh - 350px)">
      <div style="width: 98%">
        <DepartmentDealCards :unit-id="detailId" />
      </div>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DepartmentDealCards from '@/views/home/components/DepartmentDealCards.vue'

const detailId = ref(0)

const dialogVisible = ref(false)

defineExpose({ show })

async function show(id?: number) {
  dialogVisible.value = true
  if (id) {
    detailId.value = id
  }
}

function close() {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss">
:deep(.el-date-editor.el-date-editor--date) {
  --el-date-editor-width: 190px;
  margin-right: 16px;
}
</style>
